<template>
  <div id="inviteFriends">
    <div class="inviteFriends">
      <div class="header">
        <div class="left" @click="showPopup">
          <div class="num">{{arrUse.length}}</div>
          <div class="title_gray">已邀请好友</div>
        </div>
        <div class="right" @click="showPopupRight">
          <div class="num">{{arrNotUse.length}}</div>
          <div class="title_gray">剩余邀请数量</div>
        </div>
      </div>
      <div style="clear:both"></div>
      <div class="info">
        <div class="des_title">
          <span>邀请码使用说明</span>
        </div>
        <p>1、只有通过实名认证，才有邀请好友的资格</p>
        <p>2、邀请好友的数量是根据级别是分配的，级别越高,</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;邀请好友的数量就越多</p>
        <p>3、如果有疑问请及时联系客服</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;intmob@beyondsoft.com</p>
      </div>
      <div style="clear:both"></div>
      <div class="card">
        <div class="card_inner">
          <img src="/static/imgs/invite.png" alt />
        </div>
        <div class="my_invite">
          <div class="white">我的邀请码</div>
          <div class="white">{{contents}}</div>
          <view class="blue_btn" :data-text="contents" @tap="copyText">复制邀请码</view>
        </div>
      </div>
    </div>

    <!--左侧弹窗-->
    <van-popup
      class="left_popup"
      :show="isShowLeft"
      position="left"
      @close="onClose"
      custom-style="width: 50%;height: 100%;"
    >
      <div class="left">
        <div class="num">{{arrUse.length}}</div>
        <div class="title_gray">已邀请好友</div>
      </div>
      <div class="list">
        <ul>
          <li v-for="(u,i) in arrUse" :key="i">
            <span class="no">{{i<9?'0'+(i+1):i}}</span>
            <span>{{u.user_customer_name || u.mobile}}</span>
          </li>
        </ul>
      </div>
    </van-popup>
    <!--右侧弹窗-->
    <van-popup
      class="left_popup"
      :show="isShowRight"
      position="right"
      @close="onClose"
      custom-style="width: 50%;height: 100%;"
    >
      <div class="left">
        <div class="num">{{arrNotUse.length}}</div>
        <div class="title_gray">剩余邀请数量</div>
      </div>
      <div class="list">
        <ul>
          <li v-for="(nu,ni) in arrNotUse" :key="ni">
            <span class="no">{{ni<9?'0'+(ni+1):ni}}</span>
            <span>{{nu.in_code}}</span>
          </li>
        </ul>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // contents: '', // 赋值邀请码
      isShowLeft: false,
      isShowRight: false,
      myInvcode: [] // 接口返回数组
      // arruse:[], // 使用数组
      // arrNotUse:[] // 未使用
    };
  },
  onLoad() {
    this.fnMyinvcode();
  },
  methods: {
    fnMyinvcode() {
      this.$http
        .post({
          // url: "/mobile/api/taskinfo",
          url: "/mobile/api/myinvcode",
          data: {
            customer_id: wx.getStorageSync("userInfo").customer_id
          }
        })
        .then(res => {
          if (res.code == "RX0000") {
            this.myInvcode = res.data;
            // this.fnFormatArr(this.myInvcode)
          } else {
            wx.showToast({
              title: res.data
            });
          }
        });
    },
    showPopup() {
      this.isShowLeft = true;
    },
    onClose() {
      this.isShowLeft = false;
      this.isShowRight = false;
    },
    showPopupRight() {
      this.isShowRight = true;
    },
    copyText(e) {
      wx.setClipboardData({
        data: e.currentTarget.dataset.text,
        success: function(res) {
          wx.getClipboardData({
            success: function(res) {
              wx.showToast({
                title: "复制成功"
              });
            }
          });
        }
      });
    },
    // 格式化数组
    fnFormatArr(arr) {
      arr.filter(item => {
        if (item.status === 1) {
          this.arrUse.push(item);
        } else {
          this.arrNotUse.push(item);
        }
      });
    }
  },
  computed: {
    arrUse() {
      return this.myInvcode.filter(item => item.status === 1);
    },
    arrNotUse() {
      return this.myInvcode.filter(item => item.status === 0);
    },
    contents() {
      return this.arrNotUse[0] && this.arrNotUse[0].in_code;
    }
  }
};
</script>

<style lang='less'>
#inviteFriends {
  background: #f9f9f9;
  height: 100vh;
  .inviteFriends {
    .header {
      overflow: hidden;
      height: 80px;
      .left {
        width: 180px;
        float: left;
        font-size: 14px;
        text-align: center;

        & > div {
          background: #fff;
          line-height: 40px;
        }
        .num {
          color: #226df0;
          height: 40px;
        }
        .title_gray {
          color: #999;
          height: 40px;
          border-radius: 0 0 20px 20px;
        }
      }
      .right {
        width: 180px;
        float: right;
        font-size: 14px;
        text-align: center;
        border-radius: 0 0 20px 20px;
        & > div {
          background: #fff;
          line-height: 40px;
        }
        .num {
          color: #226df0;
          height: 40px;
        }
        .title_gray {
          color: #999;
          height: 40px;
          border-radius: 0 0 20px 20px;
        }
      }
    }
    .info {
      width: 100%;
      box-sizing: border-box;
      padding: 20px;
      .des_title {
        height: 30px;
        line-height: 30px;
        & > span {
          width: 140px;
          height: 14px;
          line-height: 14px;
          text-align: center;
          border-left: 4px solid #5696ff;
          display: inline-block;
          font-weight: bolder;
          font-size: 14px;
        }
      }
      & > p {
        color: #333;
        font-size: 14px;
      }
    }
    .card {
      width: 100%;
      box-sizing: border-box;
      padding: 20px;
      overflow: hidden;
      .card_inner {
        margin: 0 auto;
        width: 325px;
        height: 162px;
        position: relative;
        & > img {
          width: 100%;
          height: 100%;
          vertical-align: middle;
        }
      }
      .my_invite {
        margin: 0 auto;
        width: 325px;
        height: 162px;
        background: #ffffff00;
        text-align: center;
        position: absolute;
        top: 280px;
        left: 24px;
        .white {
          color: #fff;
          height: 40px;
          line-height: 40px;
        }
        .blue_btn {
          margin: 0 auto;
          width: 270px;
          height: 40px;
          line-height: 40px;
          color: #1c71ec;
          background: #fff;
          border-radius: 20px;
        }
      }
    }
  }
  .left_popup {
    .left {
      width: 180px;
      font-size: 14px;
      text-align: center;
      border-bottom: 1px solid #f9f9f9;
      & > div {
        background: #fff;
        line-height: 40px;
      }
      .num {
        color: #226df0;
        height: 40px;
      }
      .title_gray {
        color: #999;
        height: 40px;
        border-radius: 0 0 20px 20px;
      }
    }
    .list {
      box-sizing: border-box;
      padding: 30px;
      text-align: center;
      & > ul {
        li {
          height: 50px;
          line-height: 50px;
          float: left;
          & > span {
            display: inline-block;
            &.no {
              width: 26px;
              height: 26px;
              line-height: 26px;
              background: #226df0;
              color: #fff;
              border-radius: 50%;
              font-size: 14px;
              margin-right: 10px;
            }
          }
        }
      }
    }
  }
}
</style>
